<template>
	<view class="profile">
		<image src="/static/img/profile/wode-bg.png" mode="" class="bgc"></image>
		<view class="userInfo">
			<view class="avatar" >
				<u-avatar :src="userInfo.headUrl" size="140" @click="handleNav('personal')"></u-avatar>
			</view>
			<text class="name" @click="handleNav('personal')">{{userInfo.nickname}}</text>
		</view>
		<view class="config">
			<view class="info_t">
				<view class="item" @click="handleNav('record')">
					<image 
					src="/static/img/profile/yundongjilu.png" 
					mode="" 
					style="width: 100rpx;height:100rpx">
					</image>
					<text>我的运动记录</text>
				</view>
				<view class="item" @click="handleNav('assess')">
					<image
					src="/static/img/profile/yundongpingu.png" 
					mode="" 
					style="width: 100rpx;height:100rpx">
					</image>
					<text>我的运动评估</text>
				</view>
				<view class="item" @click="handleNav('feedback')">
					<image
					src="/static/img/profile/yundongfankui.png" 
					mode="" 
					style="width: 100rpx;height:100rpx">
					</image>
					<text>我的运动反馈</text>
				</view>
			</view>
			<view class="info_b">
				<view class="tab">
					<view class="tab_left">
						<image 
							src="/static/img/profile/tuijian.png" 
							mode="" 
							style="width: 40rpx;height:40rpx">
							</image>
						<text>推荐</text>
					</view>
					<view class="tab_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="tab" @click="handleNav(1)">
					<view class="tab_left">
						<image
							src="/static/img/profile/zitishezhi.png" 
							mode="" 
							style="width: 40rpx;height:40rpx">
							</image>
						字体设置
					</view>
					<view class="tab_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="tab" @click="handleNav(3)">
					<view class="tab_left">
						<image
							src="/static/img/profile/jinjijiuzhu.png" 
							mode="" 
							style="width: 40rpx;height:40rpx">
							</image>
						紧急救助
					</view>
					<view class="tab_right" @tap.stop="contactsReminderChange">
						<u-switch
							space="6" 
							v-model="userInfo.contactsReminder"
							:activeValue="1"
							:inactiveValue="0"
							activeColor="#f9ae3d" 
							inactiveColor="rgb(230, 230, 230)"
							size="40"
						>
						</u-switch>
					</view>
				</view>
				<u-line></u-line>
				<view class="tab" @click="handleNav(2)">
					<view class="tab_left">
						<image
							src="/static/img/profile/tixing.png" 
							mode="" 
							style="width: 40rpx;height:40rpx">
							</image>
						提醒设置
					</view>
					<view class="tab_right" style="display: flex;font-size: 28rpx;">
						<text style="margin-right: 12rpx; color: #E1E1E1">每天定时提醒/数据异常提醒</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="tab" @click="handleNav(4)">
					<view class="tab_left">
						<image
							src="/static/img/profile/shiyongshuoming.png" 
							mode="" 
							style="width: 40rpx;height:40rpx">
							</image>
						使用说明
					</view>
					<view class="tab_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { loginRequest, getPhoneNumber, getUserInfo } from "@/service/api.js"
	import {login} from '@/service/request.js'
	import funUtils from '@/utils/fun.js'
	import Cache from '@/utils/cache.js'
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				imageSrc: "/static/img/profile/wode-bg.png",
				value11: true,
				
				userInfo: {},
				
				code: "",
				
			}
		},
		onReady() {
			
		},
		onLoad() {
			uni.login({
				provider: 'weixin', 
				  success: function (loginRes) {
						const phone = getPhoneNumber(loginRes.code);
				  }
			});
			
			
		},
		onShow() {
			uni.setTabBarStyle({
				selectedColor: "#D65223"
			})
			getUserInfo().then(({data}) => {
				console.log(data)
				this.userInfo = data;
			})
		},
		methods: {
			handleNav(num) {
				let url = "";
				console.log("dinajileNv")
				switch (num) {
					case 1:
					  url = "../typeface/typeface";
						break;
					case 2:
						url = "../remind/remind";
						break;
					case 3:
						url = "../urgent/urgent";
						break;
					case "feedback":
						url = "../feedback/feedback";
						break;
					case "record":
						url = "../record/record";
						break;
					case "assess":
						url = "../myMotionAssess/myMotionAssess";
						break;
					case "personal":
						url = "../personal/personal";
						break;
					case 4:
						url = "../instructions/instructions";
						break;
				}
				uni.navigateTo({
					url
				})
			},
			contactsReminderChange() {
				funUtils.setUserInfoSuccss('contactsReminder', this.userInfo.contactsReminder)
			}
		}
	}
</script>

<style lang="scss" scoped>
.bgc {
	width: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 0;
}
.profile {
	width: 100%;
	height: 100vh;
	background: #F4F4F4;
	.userInfo {
		height: 400rpx;
		border-bottom-left-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		overflow: hidden;
		text-align: center;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		.avatar {
			margin-top: 80rpx;
			::v-deep .u-avatar {
				margin: 0 auto 28rpx;
			}
		}
		.name {
			color: #fff;
			font-size: 34rpx;
		}
	}
	.config {
		margin: 0 40rpx;
		// height: 400rpx;
		// background-color: pink;
		transform: translateY(-80rpx);
		.info_t {
			height: 200rpx;
			background-color: #fff;
			border-radius: 32rpx;
			display: flex;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #3D3D3D;
				font-size: 26rpx;
				text {
					padding-top: 16rpx;
				}
			}
		}
		.info_b {
			background-color: #fff;
			border-radius: 32rpx;
			margin-top: 40rpx;
			> .tab {
				height: 108rpx;
				// background-color: #fff;
				// font-weight: 600;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				.tab_left {
					display: flex;
					align-items: center;
					image {
						margin: 0 12rpx;
					}
				}
			}
			::v-deep .u-divider {
				margin: 0;
			}
		}
	}
}
</style>
